<template>
	<div>
		<el-row>
			<el-tabs type="border-card">
				<el-tab-pane v-for="(item,index) in tab_list" :key="index">
					<!-- tab标题 -->
					<span slot="label">
						<i v-if="item.icon" :class="item.icon"></i>
						{{item.label}}
					</span>

					<el-row v-if="index == 0">
						<el-button @click="dialogVisible = true" style="margin-bottom: 20px;" type="primary">添加
						</el-button>
						<el-col :span="24">
							<el-table :data="Carousel_Data" border style="width: 100%">
								<el-table-column prop="date" label="id">
								</el-table-column>
								<el-table-column prop="name" label="图片">
								</el-table-column>
								<el-table-column prop="address" label="地址">
								</el-table-column>
								<el-table-column label="操作">
									<template>
										<span>
											<el-button @click="dialogVisible = true" style="margin-right: 10px;" type="success">修改</el-button>
										</span>
										<span>
											<el-button type="danger">删除</el-button>
										</span>
									</template>
								</el-table-column>
							</el-table>
						</el-col>
						<el-dialog title="轮播" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
							<el-form ref="form" :model="Carousel_form" label-width="80px">
								<el-form-item label="图片地址">
									<el-input v-model="Carousel_form.name"></el-input>
								</el-form-item>
								<el-form-item label="跳转地址">
									<el-input v-model="Carousel_form.name"></el-input>
								</el-form-item>
							</el-form>
							<span slot="footer" class="dialog-footer">
								<el-button @click="dialogVisible = false">取 消</el-button>
								<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
							</span>
						</el-dialog>
					</el-row>
				</el-tab-pane>
			</el-tabs>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogVisible: false,
				Carousel_Data: [ //轮播数据
					{},
				],
				Carousel_form:{ // 轮播提交表单
					
				},
				tab_list: [ // tab数据列
					{
						id: 1,
						icon: '',
						label: 'Data Carousel'
					},
				],
				formLabelAlign: {},

			}
		},
		mounted() {


		},
		methods: {
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			}
		}
	}
</script>

<style>

</style>
